<template>
	<div class="headerWrap">
        <div class="leftArea verMiddle" v-if="false">
            <!--折叠测边栏-->
            <el-icon v-if="!isCollapse" @click="foldMet"><fold /></el-icon>
            <el-icon v-if="isCollapse" @click="expandMet"><expand /></el-icon>
        </div>
        <div class="breadCrumbArea">
            <breadCrumb></breadCrumb>
        </div>
        <div class="rightArea">
            <!--操作按钮区域-->
            <div class="rightIcon">
                <template v-if="showBtnArea">
                    <el-button-group>
                        <el-button :disabled="isBlank || !isEditModel" @click="setArea">设置区域</el-button>
                        <el-button :disabled="!isEditModel" @click="selectTem">选择模版</el-button>
                    </el-button-group>
                    <el-button-group>
                        <el-button :disabled="!isEditModel" @click="previewNow(false)">预览模式</el-button>
                        <el-button :disabled="isEditModel" @click="previewNow(true)">编辑模式</el-button>
                    </el-button-group>
                    <el-button-group>
                        <el-button :disabled="!isEditModel || detailDisabled" @click="createDetailPage" class="createDetail">新建详情页</el-button>
                        <el-button :disabled="!isEditModel || detailDisabled" @click="manageDetailPage()">管理详情页</el-button>
                    </el-button-group>
                </template>
                <el-dropdown trigger="click" split-button type="primary" @click="dropDownClick" @command="dropDownCommand">
                    {{outputName}}
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="导出项目">
                            导出项目
                        </el-dropdown-item>
                        <el-dropdown-item v-if="showBtnArea" command="导出当前页">导出当前页</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <!--头像区域-->
            <el-dropdown class="user-box">
                <div class="el-dropdown-link">
                    <img src="../../assets/login.jpeg" alt="" />
                    <span>admin</span>
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
	</div>
</template>
<script type="text/javascript">
    import breadCrumb from "./breadcrumb.vue";
    //使用pinia
    import useRoute  from '@/store/route.js'
    import useProject  from '@/store/project.js'
    import { mapState,mapActions } from 'pinia';
	export default{
        inject: ['reload'],
		data () {
			return {
				isCollapse:false,
                showBtnArea:false,
                isBlank:false,
                outputName:"导出项目",
                checked:false,
                detailDisabled:false
			}
		},
        computed: { 
            ...mapState(useProject, ['isEditModel']),
            ...mapState(useRoute, ['nowItem']),
        },
        created() {
            this.$mitt.on("sideBarClick",this.showBtnAreaMet);
            this.$mitt.on("tagClick",this.showBtnAreaMet);
            this.$mitt.on("detailClick",this.showBtnAreaMet);
        },
		mounted (){
            this.showBtnAreaMet();
            //console.log(this.$pinia.state.value.routeConfig.nowItem);
        },
        watch:{
            
        },
		components : {
			breadCrumb
		},
		methods : {
            ...mapActions(useRoute, ['saveNowItem']),
            ...mapActions(useProject, ['setPreviewModel']),
            showBtnAreaMet(){
                if(this.nowItem.name){
                    this.showBtnArea = true;
                    //读取模版类型
                    this.$util.native.readJson(this.nowItem).then(res => {
                        //读取当前选择页面的json配置文件
                        if(res.type == 'blank'){
                            this.isBlank = true
                        }else{
                            this.isBlank = false
                        }
                    })
                }else{
                    this.showBtnArea = false;
                }
                //判断详情按钮是否可用
                if(typeof this.nowItem.detailName != 'undefined'){
                    //详情页面
                    this.detailDisabled = true;
                }else{
                    //不是详情页面
                    this.detailDisabled = false;
                }
            },
			async loginOut(){
                this.saveNowItem({});
                //localStorage.removeItem('isLoginSuc');
                await window.preload.setMainWinSizeSmall();
                this.$router.push({name:"project"});
                //设置模式为：编辑模式
                this.setPreviewModel(true);
            },
            foldMet(){
                this.isCollapse = true;
                this.$emit("isCollapse",this.isCollapse);
            },
            expandMet(){
                this.isCollapse = false;
                this.$emit("isCollapse",this.isCollapse);
            },
            enlargeMet(){
                this.$fullscreen.toggle()
            },
            dropDownClick(){
                if(this.outputName == "导出项目"){
                    this.outputProject();
                }if(this.outputName == "导出当前页"){
                    this.outputVueFile('btn')
                }
            },
            dropDownCommand(command){
                this.outputName = command;
                this.dropDownClick();
            },
            async outputVueFile(origin){
                //读取页面json数据
                const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
                var useResult = {
                    ...result,
                    name:this.$pinia.state.value.routeConfig.nowItem.name
                }
                //在项目的preview下生成文件
                await this.$util.native.outputVueFile(useResult);
                if(origin == 'btn'){
                    const selectResult = await window.preload.selectOutputPath();
                    if(selectResult.filePaths.length > 0){
                        //导出文件，将文件复制到此路径
                        let toSelectPath = selectResult.filePaths[0];
                        const tipMessage = await this.$util.native.outputSingleFile(this.$pinia.state.value.routeConfig.nowItem,toSelectPath);
                        if(tipMessage.code == 0){
                            this.$message.success(tipMessage.message);
                        }else{
                            this.$message.error(tipMessage.message);
                        }
                    }
                }
            },
            selectTem(){
                this.$emit("headSelectTem");
            },
            setArea(){
                this.$emit("selectSetArea");
            },
            previewNow(type){
                this.setPreviewModel(type);
                this.reload();
            },
            async outputProject(){
                const loading = this.$loading({
                    text: '导出中',
                    background: 'rgba(0, 0, 0, 0.7)',
                });
                //导出时，侧边栏.vue文件映射
                await this.$util.native.projectMap();
                //导出时，详情页面.vue文件映射
                await this.$util.native.projectDetialMap();
                //导出时，生成路由文件
                await this.$util.native.projectMapRouter();
                //生成压缩包
                await this.$util.native.compressing();
                //导出
                const selectResult = await window.preload.selectOutputPath();
                if(selectResult.filePaths.length > 0){
                    let toSelectPath = selectResult.filePaths[0];
                    const tipMessage = await this.$util.native.outputProjectZip(this.$pinia.state.value.routeConfig.nowItem,toSelectPath);
                    if(tipMessage.code == 0){
                        loading.close();
                        this.$message.success(tipMessage.message);
                    }else{
                        loading.close();
                        this.$message.error(tipMessage.message);
                    }
                }else{
                    loading.close();
                }
            },
            manageDetailPage(){
                this.$emit("manageDetailPage");
            },
            createDetailPage(){
                //
                this.$emit("creataDetail");
            },
		}
	}
</script>
<style type="text/css" lang="less">
	.headerWrap{
        width: 100%;
        height: 100%;
        position: relative;
        left: 0;
        right: 0;
        overflow: hidden;
        .leftArea{
            float: left;
            height: 100%;
            .el-icon{
                vertical-align: middle;
                cursor: pointer;
            }
        }
        .breadCrumbArea{
            height: 100%;
        }
        .rightArea{
            position:absolute;
            right:0;
            top:0;
            /* width:400px; */
            height: 100%;
            padding: 0 10px;
            display: flex;
            align-items: center;
            .el-icon{
                vertical-align: middle;
            }
        }
        .rightIcon{
            text-align:right;
            box-sizing:border-box;
            padding-right:10px;
            display:flex;
            flex-direction:row-reverse;
            .el-button {
                margin-left: 15px;
            }
        }
        .user-box {
            flex:2;
            cursor: pointer;
            text-align: right;
            img {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: 1px solid #ccc;
                vertical-align: middle;
                margin-right: 8px;
            }
            > span {
                display: inline-block;
                margin: 0 10px;
                font-size: 14px;
                vertical-align: middle;
            }
        }
    }
</style>